<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>WithoutTwo 非凡音乐</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link type="text/css" rel="Stylesheet" href="css/imageflow.css" />
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <!-- CCS for the effects-->
    <link href="css/effects.css" rel="stylesheet">
    <script type="text/javascript" src="js/imageflow.js"></script>
    <style>
        body{
            height:100%;
            width:100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;

            background-position: center center;
        }
        .main{
            height:100%;
            width:100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;

            background-position: center center;

        }
        .hovereffect {
            width: 100%;
            height: 100%;
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            cursor: default;
        }

        .hovereffect .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            background-color: rgba(0,0,0,0.5);
            -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
            transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
        }

        .hovereffect img {
            display: block;
            position: relative;
            -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
            transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
        }

        .hovereffect h2 {
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            position: relative;
            font-size: 17px;
            background: rgba(0,0,0,0.6);
            -webkit-transform: translatey(-100px);
            -ms-transform: translatey(-100px);
            transform: translatey(-100px);
            -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
            transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
            padding: 10px;
        }

        .hovereffect a.info {
            text-decoration: none;
            display: inline-block;
            text-transform: uppercase;
            color: #fff;
            border: 1px solid #fff;
            background-color: transparent;
            opacity: 0;
            filter: alpha(opacity=0);
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
            margin: 50px 0 0;
            padding: 7px 14px;
        }

        .hovereffect a.info:hover {
            box-shadow: 0 0 5px #fff;
        }

        .hovereffect:hover img {
            -ms-transform: scale(1.2);
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }

        .hovereffect:hover .overlay {
            opacity: 1;
            filter: alpha(opacity=100);
        }

        .hovereffect:hover h2,.hovereffect:hover a.info {
            opacity: 1;
            filter: alpha(opacity=100);
            -ms-transform: translatey(0);
            -webkit-transform: translatey(0);
            transform: translatey(0);
        }

        .hovereffect:hover a.info {
            -webkit-transition-delay: .2s;
            transition-delay: .2s;
        }


        /*媒体查询：注意and后面空格的添加*/
        /*iphone: w < 768px*/
        @media screen and (max-width: 768px){
            .container{
                width:100%;
                background-color: green;
            }
        }
        /*pad: w >= 768  && w< 992*/
        @media screen and (max-width: 992px) and (min-width: 768px) {
            .container{
                width:750px;
                background-color: blue;
            }
        }
        /*中等屏幕   w >= 992  && w<1200*/
        @media screen and (max-width: 1200px) and (min-width: 992px) {
            .container{
                width:970px;
                background-color: pink;
            }
        }
        .cover {
            border-radius: 50%;

            overflow: hidden;
            box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
            position:relative;
        }
        .cover:after{
            position:absolute;
            content:'';
            width:100%;
            height:100%;
            top:0;
            left:0;
            border-radius:50%;
            box-shadow:0 0 30px 10px rgba(255,255,255,.7) inset;
        }
    </style>
    <script>
        $(document).ready(function(){
            $('#circleContent').carousel({interval:5000});//每隔5秒自动轮播
        });
    </script>
</head>
<body style="background:white">
<!--
注意:这里由于设置了顶部固定导航栏：navbar-fixed-top
所以，当设置内容页时，顶部导航栏可能会盖住内容。这时需要给内容部分设置一个顶部外边距也可以解决
 -->
<div class="main">

<nav class="nav navbar-inverse navbar-fixed-top" role="navgation" style="background: rgba(0,0,0,0)">
    <div class="container-fluid" style="background: rgba(0,0,0,0)">
        <div class="navbar-header">
            <div style="margin-right:10px">
            <!--<a href="#" class="navbar-brand">-->
                <!--<img src="img/baidu.png" style="width: 100px;height: 30px;">-->
                <h4 style="color:black">当音乐遇见你</h4>
            <!--</a>-->
            </div>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background: black">
                <span class="icon-bar" style="color:black"></span>
                <span class="icon-bar" style="color:black"></span>
                <span class="icon-bar" style="color:black"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav nav">
                <li class="active"><a href="index.html">首页</a></li>
                <li ><a href="listen.html" style="color:black">歌单</a></li>
                <li><a href="listen.html" style="color:black">排行榜</a></li>
                <li><a href="about.html " style="color:black">关于</a></li>
            </ul>
            <div class="navbar-form navbar-right" style="margin-right: 30px;">
                <input type="text" class="form-control" name="" placeholder="请输入搜索内容" style="background: rgba(0,0,0,0)">
                <button class="btn btn-default" style="margin-right: 30px;" style="background: rgba(0,0,0,0)">搜索</button>
                <a href="login.html?username=&password=" class="navbar-link" style="color: black">注册</a>
                <a href="login.html" class="navbar-link" style="color: black">登录</a>
            </div>
        </div>
        <div>
        </div>

    </div>
</nav>

    <div id="myCarousel" class="carousel slide" style="background: white; margin-top: 60px; background-position:center center;">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active cover" >
                <img src="img/1.jpg" style="width: 100%; height: 100%" alt="First slide">
                <div class="carousel-caption">标题 1</div>
            </div>
            <div class="item cover">
                <img src="img/2.jpg"  style="width:100%; height: 100%" alt="Second slide">
                <div class="carousel-caption">标题 2</div>
            </div>
            <div class="item cover">
                <img src="img/3.jpg"  style="width:100%; height: 100%" alt="Third slide">
                <div class="carousel-caption">标题 3</div>
            </div>
            <div class="item cover">
                <img src="img/4.jpg"  style="width:100%; height: 100%" alt="Forth slide">
                <div class="carousel-caption">标题 3</div>
            </div>

        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel"
           data-slide="prev">&lsaquo;
        </a>
        <a class="carousel-control right" href="#myCarousel"
           data-slide="next">&rsaquo;
        </a>
    </div>
    <!--<div style="width:100%; height: 60%; background: red; padding-top: 2%; margin-top: 800px;">
        fdfdfd
    </div>

-->
    <div style="background-color: black; border: 1px; border-radius:20%; margin-top: 10px; margin-bottom: 10px; color: white; float:left; width: 100%">
        每日推荐
    </div>
    <div class="hot" style="background: white">
        <div class="container" style="background: rgba(0,0,0,0);background: white; margin-left: 0px; width: 100%">

            <div class="row" style="width: 100%;float:left;">

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover1">
                        <img class="img-responsive" src="images/girl.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 1</h2>
                            <button class="info" data-toggle="modal" data-target="#modal1">Listen
                            </button>
                        </div>
                    </div>
                </div>


                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover2">
                        <img class="img-responsive" src="images/p11.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 2</h2>
                            <button class="info" data-toggle="modal" data-target="#modal2">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover3">
                        <img class="img-responsive" src="images/p13.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 3</h2>
                            <button class="info" data-toggle="modal" data-target="#modal3">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-md-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover4">
                        <img class="img-responsive" src="images/p18.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 4</h2>
                            <button class="info" data-toggle="modal" data-target="#modal4">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-sm-block"></div>


                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover42">
                        <img class="img-responsive" src="images/p20.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 4 v2</h2>
                            <button class="info" data-toggle="modal" data-target="#modal4v2">Listen
                            </button>
                        </div>
                    </div>
                </div>


                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover1v2">
                        <img class="img-responsive" src="images/p23.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 1 v2</h2>
                            <button class="info" data-toggle="modal" data-target="#modal1v2">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-md-block"></div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover5">
                        <img class="img-responsive" src="images/p10.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 5</h2>
                            <button class="info" data-toggle="modal" data-target="#modal5">Listen
                            </button>
                        </div>
                    </div>
                </div>


                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover6">
                        <img class="img-responsive" src="images/for.jpg" alt="">


                        <div class="overlay point" data-toggle="modal" data-target="#modal6">
                            <h2>Hover effect 6</h2>
                            <div class="rotate">
                                <p class="group1">
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </p>
                                <hr><hr>

                                <p class="group2">
                                    <a href="#"><i class="fa fa-instagram"></i></a>
                                    <a href="#"><i class="fa fa-dribbble"></i></a>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover7">
                        <img class="img-responsive" src="images/hand.jpg" alt="">
                        <div class="overlay point" data-toggle="modal" data-target="#modal7">
                            <h2>Hover effect 7</h2>
                            <p>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-instagram"></i></a>
                                <a href="#"><i class="fa fa-dribbble"></i></a>
                            </p>
                        </div>

                    </div>
                </div>

                <div class="clearfix visible-md-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover8">
                        <img class="img-responsive" src="images/p9.jpg" alt="">
                        <div class="overlay point" data-toggle="modal" data-target="#modal8">
                            <h2>Hover effect 8</h2>
                            <p class="set1">
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                            </p>
                            <hr><hr>
                            <p class="set2">
                                <a href="#"><i class="fa fa-instagram"></i></a>
                                <a href="#"><i class="fa fa-dribbble"></i></a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover9">
                        <img class="img-responsive" src="images/p.jpg" alt="">
                        <div class="overlay">
                            <h2>Hover effect 9</h2>
                            <button class="info" data-toggle="modal" data-target="#modal9">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover10">
                        <img class="img-responsive" src="images/p14.jpg" alt="">
                        <div class="overlay">
                            <button class="info" data-toggle="modal" data-target="#modal10">Listen
                            </button>
                            <p class="icon-links">
                                <a href="#"><span class="fa fa-twitter"></span></a>
                                <a href="#"><span class="fa fa-facebook"></span></a>
                                <a href="#"><span class="fa fa-instagram"></span></a>
                            </p>

                        </div>
                    </div>
                </div>

                <div class="clearfix visible-md-block"></div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover11">
                        <img class="img-responsive" src="images/p3.jpg" alt="">
                        <div class="overlay">
                            <h2>Effect 11</h2>
                            <button class="info nullbutton" data-toggle="modal" data-target="#modal11">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover12">
                        <img class="img-responsive" src="images/p26.jpg" alt="">
                        <div class="overlay">
                            <h2>Effect 12</h2>
                            <button class="info nullbutton" data-toggle="modal" data-target="#modal12">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 bloc">
                    <div class="hover ehover13">
                        <img class="img-responsive" src="images/p4.jpg" alt="">
                        <div class="overlay">
                            <h2>Effect 13</h2>
                            <button class="info nullbutton" data-toggle="modal" data-target="#modal13">Listen
                            </button>
                        </div>
                    </div>
                </div>

                <div class="clearfix visible-md-block"></div>

                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                    <div class="hover ehover14">
                        <img class="img-responsive" src="images/cac.jpg" alt="">
                        <div class="overlay">
                            <h2>lense effect</h2>
                            <button class="info nullbutton" data-toggle="modal" data-target="#modal14">Listen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="foot">

    </div>
    <footer class="container-fluid" style="background: white">
        <div class="container">
            <div class="row">
                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black; border:3px; border-color: black">
                    <h3>Subscribe</h3>
                    <ul>
                        <li><a href="#" style="color: black">Newsletter</a></li>
                        <li><a href="#" style="color: black">RSS feed</a></li>
                        <li><a href="#" style="color: black">RSS to Email</a></li>
                        <li><a href="#" style="color: black">Product Hunt</a></li>
                        <li><a href="#" style="color: black">Twitter</a></li>
                        <li><a href="#" style="color: black">Facebook</a></li>
                        <li><a href="#" style="color: black">Pinterest</a></li>
                        <li><a href="#" style="color: black">Google+</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black">
                    <h3>BROWSE</h3>
                    <ul>
                        <li><a href="#" style="color: black">Home</a></li>
                        <li><a href="#" style="color: black">Gallery</a></li>
                        <li><a href="#" style="color: black">Templates</a></li>
                        <li><a href="#" style="color: black">Resources</a></li>
                        <li><a href="#" style="color: black">OPL Themes</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black">
                    <h3>INFORMATION</h3>
                    <ul>
                        <li><a href="#" style="color: black">About</a></li>
                        <li><a href="#" style="color: black">Why One Page?</a></li>
                        <li><a href="#" style="color: black">OPL Blog</a></li>
                        <li><a href="#" style="color: black">Product Hunt</a></li>
                        <li><a href="#" style="color: black">Advertise</a></li>
                        <li><a href="#" style="color: black">Submit</a></li>
                        <li><a href="#" style="color: black">Award Ribbons</a></li>
                        <li><a href="#" style="color: black">Roadmap</a></li>
                    </ul>
                </div>

                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black">
                    <h3>RESOURCES</h3>
                    <ul>
                        <li><a href="#">Browse All</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Development</a></li>
                        <li><a href="#">Hosting</a></li>
                        <li><a href="#">Round Ups</a></li>
                        <li><a href="#">Tutorials</a></li>
                    </ul>

                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black">
                    <h3>TRENDING</h3>
                    <ul>
                        <li><a href="#">Big Typography</a></li>
                        <li><a href="#">Free Templates</a></li>
                        <li><a href="#">Most Loved</a></li>
                        <li><a href="#">Centrally Divided</a></li>
                        <li><a href="#">Skrollr.js</a></li>
                        <li><a href="#">Parallax Scrolling</a></li>
                        <li><a href="#">Off-Canvas Menu</a></li>
                        <li><a href="#">Molecules</a></li>
                    </ul>
                </div>
                <div class="row-content col-lg-2 col-sm-4 col-xs-6" style="color: black">
                    <h3>OPL THEMES</h3>
                    <ul>
                        <li><a href="#">Browse All</a></li>
                        <li><a href="#">East Java</a></li>
                        <li><a href="#">Clutterless</a></li>
                        <li><a href="#">Mapped</a></li>
                    </ul>
                </div>

            </div>

            <p align="center" style="margin-top: 20px;color:black;">
                Copyright &copy;2017 Dreyer
            </p>

    </footer>
    <link rel="stylesheet/less" type="text/css" href="less/styles.less">
    <!--部分样式是用less写的，同样帖上来
    -->
</div>




<!--
注意:这里由于设置了顶部固定导航栏：navbar-fixed-top
所以，当设置内容页时，顶部导航栏可能会盖住内容。这时需要给内容部分设置一个顶部外边距也可以解决
<div style="height: 1500px;width: 500px;background-color: red; margin-top: 70px;"></div>
 -->
<style>
    .bloc{
        padding:10px 10px 10px 10px;
        border-radius:10px;
        border: 2px;
    }
    a{
        color: black;
    }
</style>

</body>
</html>
